<template>
  <div class="x-warn-container" :style="{top:top,right:right,width:modelW,height:modelH}">
    <div class="x-warn" :style="{height:modelH,backgroundImage:'url('+borderBg+')'}">
      <div class="warn-title">
        <span class="sp-title">{{title}}</span>
      </div>
      <div class="warn-ctx" :leader="leader">
        <x-imsinfo v-if="index==0"></x-imsinfo>
        <div v-if="index==1" style="height:calc(100% - 0%);width:94%;margin-left:3%">
          <img src="@/assets/images/reportwarn.png" alt style="width:100%;height:100%" />
        </div>
        <x-reportitem v-if="index==2" />
        <x-warnitem :newMap="newMap" :leader="leader" v-if="index==3" />
      </div>
    </div>
    <!--  <div
      class="x-warn"
      v-if="index==5"
      style="margin-top:1rem"
      :style="{height:modelH,backgroundImage:'url('+borderBg+')'}"
    >
      <div class="warn-title">
        <span class="sp-title">最新上报信息</span>
      </div>
      <div class="warn-ctx">
        <x-reportitem />
      </div>
    </div>-->
  </div>
</template>

<script>
import XWarnitem from "@/components/xwarnitem";
import XReportitem from "@/components/xreportitem";
import XImsinfo from '@/components/ximsinfo'
export default {
  name: "xbottomwarnitem",
  data() {
    return {
      borderBg: require("@/assets/images/bg_info.png")
    };
  },
  props: {
    newMap: {
      type: Object
    },
    index: {
      type: Number,
      default: -1
    },
	leader: {
				type: String,
			},
    top: {
      type: String,
      default: "15%"
    },
    right: {
      type: String,
      default: "1.5rem"
    },
    modelW: {
      type: String,
      default: "522px"
    },
    modelH: {
      type: String,
      default: "485px"
    }
  },
  components: {
    XWarnitem,
    XReportitem,
    XImsinfo
  },
  computed: {
    title() {
      switch (this.index) {
        case 0:
          return "电子围栏";
          break;
        case 1:
          return "周界围栏";
          break;
        case 2:
          return "物联设备";
          break;
        case 3:
          return "预警事件";
          break;
      }
    }
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.x-warn-container {
  position: absolute;
  z-index: 2;
  height: auto;
  .x-warn {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 22rem;
    .warn-title {
      width: 100%;
      height: 2.4rem;
      line-height: 2.4rem;
      text-align: center;
      font-size: 0.9rem;
      color: #333;
      position: relative;
      .sp-title {
        color: #e9e9e9;
        margin: 0px 0px 4px 0px;
        font-size: 0.9rem;
      }
    }
    .warn-ctx {
      width: 100%;
      height: calc(100% - 2.4rem);
      padding-bottom: 0.5rem;
      box-sizing: border-box;
    }
  }
}
</style>
